<template>
    <div class="addresshome">
        <h4>我的地址</h4>
        <div class="tablearea">
          <el-button
          size="mini"
          @click="dialogVisible = true">新增</el-button>
     <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="receiver"
      label="收件人姓名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话号码"
      width="150">
    </el-table-column>
    <el-table-column
      prop="addressDetail"
      label="详细地址"
      width="250">
    </el-table-column>
    <el-table-column
      label="默认地址"
      prop="value"
      >
      <template scope="scope">

      <el-switch
        v-model="scope.row.value"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="1"
        inactive-value="0"
        @change=change(scope.$index,scope.row)>
      </el-switch>

      </template>
    </el-table-column>
   <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

    <el-dialog title="地址信息" :visible.sync="dialogVisible" width="40%" :modal="false">
      <el-form label-position="left" label-width="100px" :model="info" ref="info">
        <el-form-item label="收货人姓名:">
          <el-input v-model="info.receiver" prefix-icon="el-icon-s-custom" class="login-subject-input"
            placeholder="请输入你的姓名"></el-input>
        </el-form-item>

        <el-form-item label="电话号码:">
          <el-input v-model="info.phone" prefix-icon="el-icon-mobile-phone" class="login-subject-input"
            placeholder="请输入你的电话号码"></el-input>
        </el-form-item>

         <el-form-item label="详细地址:">
          <el-input v-model="info.addressDetail" prefix-icon="el-icon-map-location"  class="login-subject-input"
            placeholder="请输入你的详细地址"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </el-dialog>
     <el-dialog title="地址信息" :visible.sync="dialogEdit" width="40%" :modal="false">
      <el-form label-position="left" label-width="100px" :model="editInfo" ref="editInfo">
        <el-form-item label="收货人姓名:">
          <el-input v-model="editInfo.receiver" prefix-icon="el-icon-s-custom" class="login-subject-input"
            placeholder="请输入你的姓名"></el-input>
        </el-form-item>

        <el-form-item label="电话号码:">
          <el-input v-model="editInfo.phone" prefix-icon="el-icon-mobile-phone" class="login-subject-input"
            placeholder="请输入你的电话号码"></el-input>
        </el-form-item>

         <el-form-item label="详细地址:">
          <el-input v-model="editInfo.addressDetail" prefix-icon="el-icon-map-location"  class="login-subject-input"
            placeholder="请输入你的详细地址"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </span>
    </el-dialog>
    </div>

</template>

<script>
import { searchAdd, editAdd, deleteAddress, updateAddress, inputAddress } from '@/api/user'
export default {

  data () {
    return {
      dialogVisible: false,
      dialogEdit: false,
      tableData: [],
      info: {
        receiver: '',
        phone: '',
        addressDetail: ' ',
        value: ''
      },
      editInfo: {
        receiver: '',
        phone: '',
        addressDetail: ' ',
        value: '',
        id: 0
      },
      zid: -1
    }
  },
  created () {
    this.getaddressId()
  },
  methods: {
    handleClick (row) {
      console.log(row)
    },
    handleEdit (index, row) {
      this.dialogEdit = true
      this.editInfo.addressDetail = row.addressDetail
      this.editInfo.phone = row.phone
      this.editInfo.receiver = row.receiver
      this.editInfo.id = row.id
    },
    getaddressId () {
      // 比较个人信息中的默认地址id和后台传过来的id表，将相同的value设置为1，其余为0
      // 搜索到的数据渲染上 tableData
      const id = JSON.parse(localStorage.getItem('userMsg')).id
      const user = JSON.parse(localStorage.getItem('userMsg'))
      searchAdd(id).then(res => {
        if (res.data.meta.status === 200) {
          // 渲染
          this.tableData = res.data.data
          console.log(this.stableData)
          this.tableData.forEach((item, index) => {
            if (item.id === user.addressDefault) {
              this.$set(item, 'value', '1')
            } else {
              this.$set(item, 'value', '0')
            }
          }
          )
          this.$message({
            message: '查询成功！',
            type: 'success'
          })
        } else {
          this.$message({
            message: '暂无数据',
            type: 'warning'
          })
        }
      })
    },
    change (index, row) {
      // 如果这行为正，将其他行全部更改为false
      if (row.value === '1') {
        this.tableData.forEach((item, ind) => {
          if (ind !== index) {
            item.value = '0'
            console.log(ind)
          }
        })
        const data = {
          accId: JSON.parse(localStorage.getItem('userMsg')).id,
          addressDefault: row.id
        }
        // 这一行地址为正的话把这行地址添加到用户的默认地址
        // 这个editAdd要改一下接口
        editAdd(data).then(res => {
          if (res.data.meta.status === 200) {
            this.$message({
              message: '修改成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.meta.msg,
              type: 'warning'
            })
          }
        })
      } else {
        // 如果是将默认地址改成了普通地址，就把个人的默认地址更新为空
        //  addressDefault='',
        // const count = 0,
        this.tableData.forEach((item, index) => {
          if (item.value === '0') {
            //  count =0
          } else {
            //  count++,
            this.zid = item.id
          }
        })
        const data = {
          accId: JSON.parse(localStorage.getItem('userMsg')).id,
          addressDefault: this.zid
        }
        // 这一行地址为正的话把这行地址添加到用户的默认地址
        // 这个editAdd要改一下接口
        editAdd(data).then(res => {
          if (res.data.meta.status === 200) {
            this.$message({
              message: '修改成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.meta.msg,
              type: 'warning'
            })
          }
        })
      }
    },
    // 修改地址信息
    saveEdit () {
      const data = {
        id: this.editInfo.id,
        accId: JSON.parse(localStorage.getItem('userMsg')).id,
        receiver: this.editInfo.receiver,
        addressDetail: this.editInfo.addressDetail,
        phone: this.editInfo.phone
      }
      updateAddress(data).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
          this.editInfo = res.data.data
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
      this.getaddressId()
      this.dialogEdit = false
    },
    handleDelete (index, row) {
      deleteAddress(row.id).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
      this.getaddressId()
    },
    save () {
      const data = {
        accId: JSON.parse(localStorage.getItem('userMsg')).id,
        receiver: this.info.receiver,
        addressDetail: this.info.addressDetail,
        phone: this.info.phone
      }
      inputAddress(data).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
          this.editInfo = res.data.data
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
      this.getaddressId()
      this.dialogVisible = false
    }
  }
}
</script>

<style>
.addresshome{
    width: 900px;
    top: 40%;
    text-align: center;
    margin: auto;
}
</style>
